<template>
  <div class="content">
    <div v-if="list.length>0" class="personal-item">

      <router-link :to="{name:'personalDetail',query:{id:item.customerId}}" v-for="(item,index) in list" :key="item.id"
                   class="list-item">
        <div class="information-item">
          <div class="personal-img">
            <img :src="item.customer.user.faceUrl" class="personal-img">
          </div>
          <div class="name-item">
            <div class="personal-name">{{ item.customer.realName }}</div>
            <div class="personal-wage"></div>
          </div>
          <div class="personal-information">
            <div class="sexText">
              {{ item.customer.birthday }}岁/{{ item.customer.educationText }}/{{ item.customer.workTimeStart }}
            </div>
          </div>
        </div>
        <div class="personal-label-block">

        </div>
        <div class="address-item">
          <div class="address-title">投递时间：</div>
          <div class="personal-address">{{ item.formatTime }}</div>
        </div>
      </router-link>
    </div>
    <el-empty v-else></el-empty>
    <div v-if="list.length>0 && count>limit" style="display: flex; justify-content: center;align-content: flex-end;">
      <el-pagination
          background
          :page-size="limit"
          layout="prev, pager, next"
          :total="count"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" >
      </el-pagination>
    </div>
  </div>


</template>

<script>
import {getWorkApplyByComApi} from "@/api/Account";
import {delResumeNumberApi} from "@/api/position";

export default {
  name: "getResume",

  data() {
    return {
      list: [],
      page: 1,
      limit: 10,
      count: 0
    }

  },
  methods: {
    getWorkApplyByCom() {
      getWorkApplyByComApi({page: this.page, limit: this.limit}).then((res) => {
        this.list = res.list
        this.count = res.count
        console.log(this.list)
      }).catch((res) => {
        console.log(res)
      })
    },
    delResumeNumber() {
      delResumeNumberApi().then((res) => {
        console.log(res)
        this.list = res
        console.log(this.list)
      }).catch((res) => {
        console.log(res)
      })
    },
       // 每页显示数量change
    handleSizeChange(e) {
      this.limit = e
      this.getWorkApplyByCom()
    },
    // 当前页change
    handleCurrentChange(e) {
      this.page = e
      this.getWorkApplyByCom()
    },

  },
  mounted() {
    this.getWorkApplyByCom();
    this.delResumeNumber();

  }
}
</script>

<style lang="scss" scoped>
.content {
  width: $contentWidth;
  margin: 0 auto;
  min-height: $fullMinHeight;

  .personal-item {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;

    .list-item {
      width: calc((100% - 20px) / 2);
      padding: 20px;
      margin-bottom: 15px;
      background-color: #fff;

      .information-item {
        border-bottom: 1px solid $lightGray;

        .personal-img {
          width: 50px;
          height: 50px;
          position: absolute;
          margin-bottom: 15px;
          border-radius: 50%;
        }

        .name-item {
          display: flex;
          flex-direction: row;
          margin-left: 70px;
          margin-bottom: 15px;

          .personal-name {
            font-weight: bold;
            font-size: 18px;
          }

          .personal-wage {
            font-weight: bold;
            font-size: 18px;
            color: $orange;
            margin-left: 20px;
          }
        }

        .personal-information {
          margin-left: 70px;
          font-size: 13px;
          color: $darkGray;
          margin-top: 10px;
          margin-bottom: 15px;
          display: flex;
          flex-direction: row;

          .sexText {
            color: $darkGray;
            //border-right: 1px solid $darkGray;
            padding-right: 3px;
            margin-right: 3px;
          }

          .education {
            color: $darkGray;
            //border-right: 1px solid $darkGray;
            padding-right: 3px;
            margin-right: 3px;
          }

          .workTimeStart {
            color: $darkGray;
          }
        }
      }
    }

    .personal-label-block {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-top: 15px;

      .personal-label-item {
        margin-right: 10px;
        margin-bottom: 10px;
        color: $darkGray;
        background: $lightGray;
        padding: 4px 8px;
        font-size: 13px;
      }
    }

    .address-item {
      display: flex;
      flex-direction: row;
      font-size: 13px;

      .address-title {
        color: $darkGray;
      }

      .personal-address {
        //font-weight: bold;
      }
    }
  }
}

</style>
